/**
 * Created by xmgong on 2017/12/13.
 * 商品属性表
 */
import React from 'react';
import {connect} from 'react-redux';
import {View, ScrollView, Text, FlatList, TouchableOpacity, Image} from 'react-native';
import {naviPush} from '../../navigatorApp/actions'
import CLNavigatorHeader from '../../component/CLNavigatorHeader';
import styles from './styles';
import CLTagView from '../../component/CLTagView'
import themeconfig from '../../config/theme';
import StepInfo from './stepInfo';
import {getGoodsAttrRelations} from '../../utils/NativeUtil';
import CheckBox from 'react-native-checkbox';
import {ArrayUtil} from '../../utils/common';
import {initProperty, refreshProperty, saveGoodsAttr, getProductProperty} from './actions';

class Property extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectItems: [],
        };
        this.goodsId = "";
        this.catCode = "";
    }

    static navigationOptions = ({navigation, screenProps}) => {
        const {params = {}} = navigation.state;
        let header = (<CLNavigatorHeader navigation={navigation} title="基本属性"/>);
        return {header}
    };

    componentDidMount() {
        let self = this;
        this.catCode = this.props.navigation.state.params.catCode;
        this.goodsId = this.props.navigation.state.params.id;

        getGoodsAttrRelations(this.catCode, function (res) {
            let list = [];

            res.map((item) => {
                list.push({
                    attrId: item.attrId,
                    attrName: item.attrName,
                    attrValue: '',
                    isMain: item.isMain,
                    isNormal: item.isNormal,
                    isDefault: item.isDefault,
                    dicId: item.dicId
                });
            });

            let params = {
                token: self.props.token,
                goodsId: self.goodsId
            };
    
    
            self.props.getProductProperty(params, function (res) {
                let netList = res.data;
                let item;
                for (let i = 0; i < list.length; i++) {
                    item = list[i];
                    netList.map((it) => {
                        if (it.attrId == item.attrId) {
                            item.attrValue = it.attrValue;
                            item.isDefault = 1;
                        }
                    });
                }
                self.props.initProperty(list);
                self.props.refreshProperty();
            });
        });

    }

    /**
     * 编辑属性
     * @param item
     */
    editProperty = (item) => {
        this.props.naviPush("EditStandard", {property: item});
    };


    changeSelected = (item, checked) => {
        let items = this.state.selectItems;
        if (!checked) {
            items.push(item);
        } else {
            ArrayUtil.delete(items, item);
        }
        this.setState({
            selectItems: items
        });
    };

    /**
     * 规格
     */
    _renderItemGG = ({item}) => {
        let values = item.attrValue.split(";");
        let tagViews = null;
        if (values != undefined && values.length > 0) {
            let temp = values.map((key) => {
                if (key == '') {
                    return null;
                } else {
                    return (<CLTagView
                        customStyle={{
                            margin: 5,
                            borderColor: themeconfig.maincolor
                        }}
                        title={key}
                        textStyle={{
                            fontSize: 14,
                            color: themeconfig.maincolor
                        }}/>);
                }
            });
            tagViews = (<View style={styles.tagcontainer}>{temp}</View>);
        }


        return (
            <View style={styles.PropertyView}>
                <TouchableOpacity style={{flex: 1}} onPress={() => this.editProperty(item)}>
                    <View
                        style={{
                            flex: 1,
                            flexDirection: 'column',
                            justifyContent: 'center'
                        }}>
                        <Text style={{marginLeft: 5,marginTop:5}}>{item.attrName}</Text>
                        {tagViews}
                    </View>
                </TouchableOpacity>
                <Image source={require('../../image/img_right_grey.png')}
                       style={{width: 20, height: 20, marginLeft: 5}}/>
            </View>)

    };

    /**
     * 属性
     */
    _renderItemProperty = ({item}) => {
        return (
            <View style={styles.PropertyView}>
                <TouchableOpacity style={{flex: 1}} onPress={() => this.editProperty(item)}>
                    <View
                        style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', flex: 1}}>
                        <Text>{item.attrName}</Text>
                        <Text>{item.attrValue}</Text>
                    </View>
                </TouchableOpacity>
                <Image source={require('../../image/img_right_grey.png')}
                       style={{width: 20, height: 20, marginLeft: 5}}/>
            </View>)
    };

    _ItemSeparatorComponent() {
        return (<View style={{height: 1, backgroundColor: '#eee'}}/>)
    }

    render() {
        let bottomView;
        bottomView = <TouchableOpacity
            onPress={() => {
                this.productStandard()
            }}>
            <View style={styles.submitButton}>
                <Text style={{
                    color: "white"
                }}>下一步</Text>
            </View>
        </TouchableOpacity>;

        return (
            <View style={{flex: 1, flexDirection: 'column', backgroundColor: '#f8f7f7'}}>
                <StepInfo backgroundColor='#f8f7f7' step={1} index={1}/>
                <ScrollView>
                <View style={{ flexDirection: 'column'}}>
                    <Text style={{fontSize:20, marginLeft: 10, marginTop: 10, marginBottom: 8}}>规格属性</Text>
                    <FlatList
                        horizontal={false}
                        style={{flex: 1}}
                        data={this.props.standardList}
                        renderItem={this._renderItemGG}
                        ItemSeparatorComponent={this._ItemSeparatorComponent}
                    />
                </View>
                <View style={{ flexDirection: 'column'}}>
                    <Text style={{ fontSize:20, marginLeft: 10, marginTop: 10, marginBottom: 8}}>基本属性</Text>
                    <FlatList
                        horizontal={false}
                        style={{flex: 1}}
                        data={this.props.normalList}
                        renderItem={this._renderItemProperty}
                        ItemSeparatorComponent={this._ItemSeparatorComponent}
                    />
                </View>
                </ScrollView>
                {bottomView}
            </View>);
    }

    editStandards = () => {
        this.props.naviPush("Standards", {
            id: this.goodsId
        });
    };

    /**
     * 规格
     * token    token    是
     * goodsId    商品id    是
     * goodsAttrList
     */
    productStandard = () => {
        let self = this;
        let attrList = [];
        this.props.propertyList.map((item) => {
            attrList.push({
                attrId: item.attrId,
                attrName: item.attrName,
                attrValue: item.attrValue,
                isNormal: item.isNormal,
                isMain: item.isMain
            })
        });
        let params = {
            token: this.props.token,
            goodsId: this.goodsId,
            goodsAttrList: JSON.stringify(attrList)
        };
        this.props.saveGoodsAttr(params, function () {
            self.editStandards()
        })
    };

}


const mapStateToProps = (state) => {
    return {
        token: state.mainmodel.token,
        propertyList: state.product.propertyList,
        normalList: state.product.propertyList_Nor,
        standardList: state.product.propertyList_Standard,
    }
};


const mapDispatchToProps = (dispatch) => {
    return {
        naviPush: (routerName, params) => {
            dispatch(naviPush(routerName, params));
        },
        initProperty: (list) => {
            dispatch(initProperty(list))
        },
        refreshProperty: () => {
            dispatch(refreshProperty());
        },
        saveGoodsAttr: (params, callback) => {
            dispatch(saveGoodsAttr(params, callback))
        },
        getProductProperty: (params, callback) => {
            dispatch(getProductProperty(params, callback))
        }
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Property);